// src/views/editor/ MarkDown.tsx
import { useState } from 'react';
import ReactMarkdown from 'react-markdown' // 阅读器
import MdEditor from 'react-markdown-editor-lite'; // 编辑器
// import style manually
import 'react-markdown-editor-lite/lib/index.css'; // 样式
type MarkDownProps = {}

export const MarkDown = (props: MarkDownProps) => {
      const [content, setContent] = useState('')
      return (
           <>
               <h1>MarkDown编辑器</h1>
               <MdEditor style={{ height: '500px' }} renderHTML={text => {
                          return <ReactMarkdown>{text}</ReactMarkdown>
               }} onChange={({ html, text }: { html: any; text: any }) => {
                   console.log('html', typeof html);
                   console.log('text', text);
                   setContent(html)
                   console.log('content', content)
               }} />
               <hr />
               <div dangerouslySetInnerHTML={{ __html: content }}></div>
           </>
       )
  };